<!--这是设置题目组件-->
<template>
  <div class="app-container" style="padding: 20px 0 20px 20px;">
    <el-form :model="postForm" v-loading="listLoading" :rules="rules" ref="postForm" label-width="60px" label-position="right" style="overflow:hidden;">
      <div style="width:100%;overflow:hidden;zoom:1">
        <div class="fl" style="width: 53%;border-right: 1px solid #ddd;">
          <h3 v-if="isRadio">单选题第{{postForm.number2}}题</h3>
          <h3 v-else>多选题第{{postForm.number2}}题</h3>
          <!-- 题目编辑器 -->
          <tinymce :height="300" :tid="paperId+'problem'+nowNumber" :key="paperId+'problem'+nowNumber" :isPlugin="1" style="width: 95%;margin:0 0 10px;" v-model="postForm.problem"></tinymce>

          <el-form-item v-for="(item,index) in answerData" :label="item.name+'：'" :key="nowNumber+'-'+item.key">
            <!-- 选项编辑器 -->
            <tinymce class="editor_fl" :height="100" :tid="postForm.paperMainId+'-'+nowNumber+'-'+item.key" :isPlugin="1" v-model="item.content" placeholder="请输入选项内容" style="width: 80%;margin-right: 15px;"></tinymce>

           <el-button style="float：left;" v-if="item.isShowDelete" type="danger" v-loading="btnLoading" @click="deleteAnswer(index)">移除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-loading="btnLoading" icon="el-icon-edit" @click="addAnswer">添加选项(选项最多6个)</el-button>
          </el-form-item>
        </div>
        <div class="fr"  style="width: 45%;">
          <h3>答案解析</h3>
          <p>
            <span v-if="isRadio">答案(请点选下列选项)：{{postForm.answer}}</span>
            <span v-else>答案(请点选下列选项)：<b v-for="i in postForm.answers" :key="i">{{i}}</b></span>
          </p>
          <el-form-item>
            <el-radio-group v-model="postForm.answer" v-if="isRadio">
              <el-radio-button v-for="item in answerData" :label="item.name" :key="item.key" :value="item.name"></el-radio-button>
            </el-radio-group> 
            <el-checkbox-group v-model="postForm.answers" v-else>
              <el-checkbox-button v-for="item in answerData" :label="item.name" :key="item.key" >{{item.name}}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <p>解析：</p>  
          <tinymce :tid="postForm.paperMainId+'analysis'+nowNumber" :key="postForm.paperMainId+'analysis'+nowNumber" :isPlugin="1" :height="300" style="width: 92%;" v-model="postForm.analysis"></tinymce>
          
        </div>
      </div>
      <p style="text-align: center;">
        <el-button   v-show="toNext"  type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">
           <span>{{nextOrCom}}</span>
          </el-button>
        <a href="javascript:" style="color: #0091ea;padding-left: 100px;" @click="showPreview()" >预览试卷></a>
      </p>
      <el-form-item label="单选题号：" label-width="83px" >
        <!-- <el-pagination
          background
          layout="pager"
          :page-size="1"
          :current-page="listQuery.radioCurrentNum"
          @current-change="handleRadioCurrentChange"
          :total="listQuery.radioNum">
        </el-pagination> -->
        <div class="page-div">
          <span v-for="(site, key ) in singleArr" :key="key" :class="{'active':(site.number == postForm.number),'c-blue':(site.problem),'c-default':(site.problem =='')}" @click="toPage(site.number,site.problem)"> {{key + 1}} 
          </span>
        </div>
      </el-form-item>
      <el-form-item label="多选题号：" label-width="83px" >
        <!-- <el-pagination
          background
          layout="pager"
          :page-size="1"
          :current-page="listQuery.multipleCurrentNum"
          @current-change="handleMultipleCurrentChange"
          :total="listQuery.multipleNum">
        </el-pagination> -->
        <div class="page-div">
          <span v-for="(site, key ) in multipleArr" :key="key"  :class="{'active':(site.number == postForm.number),'c-blue':(site.problem),'c-default':(site.problem =='')}" @click="toPage(site.number,site.problem)">{{key + 1}}</span>
    
        </div>
      </el-form-item>
    </el-form>
   <previewPaper v-show="isShowPreview" @hidePreview="hidePreview" :paperId="this.paperId" :paperNum="postForm.number"></previewPaper>
  </div>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
  import previewPaper from './previewPaper.vue'
  import { toGetQuestion, toStoreQuestion } from '@/api/paper'
  // const postForm = {
  //   subject: '题目',
  //   answer: 'A',
  //   answers: ['A,B'],
  //   analysis: '' // 解析
  // }

  const rules = {
    subject: [{ required: true, message: '请输入题目', trigger: 'blur' }],
    answer: [{ required: true, message: '请输入正确答案', trigger: 'blur' }]
  }

  export default {
    components: {
      Tinymce,
      previewPaper
    },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        postForm: {},
        rules,
        answerData: [],
        formLoading: false,
        btnLoading: false,
        listQuery: {
          radioCurrentNum: -1,
          multipleCurrentNum: -1,
          radioNum: null,
          multipleNum: null
        },
        isRadio: true, // 当前题目的类型，是否是单选题
        isMultiple: false, // 是否是多选
        isShowDelete: false, // 是否显示移除按钮
        isShowPreview: false, // 是否显示试卷预览
        nowNumber: 1,
        paperId: 1, // 试卷id
        condition: null,
        listLoading: false,
        singleArr: [],
        multipleArr: [],
        toNext: false,
        nextOrCom: '下一题'
      }
    },
    watch: {
      nowNumber() {
        this.getPaperQuestion()
      }
    },
    created() {
      this.getPaperQuestion()
      this.paperId = this.$route.params.paperId
    },
    methods: {
      getPaperQuestion() {
        this.listLoading = true
        // 根据ID查找该专题下得试卷
        this.condition = { 'thePaperId': this.$route.params.paperId, 'nowNumber': this.nowNumber }
        toGetQuestion(this.condition).then(res => {
          // 正确回调
          this.postForm = res.data.data
          this.postForm.problem = res.data.data.problem == '' || res.data.data.problem == null ? ' ' : res.data.data.problem
          this.postForm.analysis = res.data.data.analysis == '' || res.data.data.analysis == null ? ' ' : res.data.data.analysis
          this.answerData = res.data.data.options
          for (let an = 0; an < this.answerData.length; an++) {
            this.answerData[an].content = this.answerData[an].content == '' ? ' ' : this.answerData[an].content
          }
          if (res.data.data.type == 1) {
            this.isRadio = true
          } else {
            this.isRadio = false
          }
          this.singleArr = res.data.data.singleNum
          this.multipleArr = res.data.data.multipleNum
          if (this.nowNumber <= this.postForm.hasNumber) {
            this.toNext = true
          } else {
            this.toNext = false
          }
  
          if (this.nowNumber == this.postForm.hasNumber) {
            this.nextOrCom = '完成编辑'
          } else {
            this.nextOrCom = '下一题'
          }
          this.listLoading = false
        })
          .catch(err => {
            console.log(err)
          })
      },
      toPage(num, problem) {
        if (problem != null) {
          this.nowNumber = num
          this.getPaperQuestion
        }
      },
      hidePreview(msg) {
        this.isShowPreview = msg
      },
      addAnswer() {
        if (this.answerData.length < 6) {
          var name = String.fromCharCode(this.answerData[this.answerData.length - 1].name.charCodeAt() + 1)
          var obj = {
            key: this.answerData.length,
            name: name,
            content: '',
            isShowDelete: false
          }
          this.answerData.push(obj)
          for (var i in this.answerData) {
            this.answerData[i].isShowDelete = false
          }
          this.answerData[this.answerData.length - 1].isShowDelete = true
        } else {
          this.$message({
            type: 'info',
            message: '选项最多6个!'
          })
        }
      },
      deleteAnswer(id) { // 删除选项
        this.answerData.splice(id, 1)
        if (id > 2) {
          this.answerData[id - 1].isShowDelete = true
        }
      },
      topicSelect(val) {},
      showResultSelect(val) {
        if (val === 1) {
          this.isShowFraction = true
        } else {
          this.isShowFraction = false
        }
      },
      reviewsSelect(val) {
        if (val === 1) {
          this.isUnity = true
          this.isReviews = false
        } else if (val === 2) {
          this.isReviews = true
          this.isUnity = false
        } else {
          this.isUnity = false
          this.isReviews = false
        }
      },
      submitForm() {
        for (var i in this.answerData) {
          if (this.answerData[i].content == '') {
            this.$alert('选项内容不能为空！！', '警告', {
              confirmButtonText: '确定'
            })
            return
          }
        }
        if (this.isRadio) {
          if (this.postForm.answer == null) {
            this.$alert('答案不能为空！！', '警告', {
              confirmButtonText: '确定'
            })
            return
          }
        } else {
          if (this.postForm.answers.length < 1) {
            this.$alert('答案不能为空！！', '警告', {
              confirmButtonText: '确定'
            })
            return
          }
        }
        if (this.postForm.problem == '') {
          this.$alert('问题不能为空！！', '警告', {
            confirmButtonText: '确定'
          })
          return
        }
        this.listLoading = true
        var newData = { postForm: this.postForm, options: this.answerData }
        toStoreQuestion(newData).then(res => {
          if (this.nowNumber == this.postForm.hasNumber) {
            this.close()
          } else {
            this.nowNumber = this.nowNumber + 1
          }
        }).catch(err => {
          this.listLoading = false
          console.log(err)
        })
      },
      handleRadioCurrentChange(val) {
        this.listQuery.radioCurrentNum = val
        this.nowNumber = val
      },
      handleMultipleCurrentChange(val) {
        this.listQuery.multipleCurrentNum = val
        this.nowNumber = val
      },
      close() {
        this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
          const latestView = views.slice(-1)[0]
          if (latestView) {
            this.$router.push(latestView.path)
          } else {
            this.$router.push('/')
          }
        })
      },
      showPreview() {
        this.isShowPreview = true
      }
    }
  }
</script>
<style scoped>
/* #mceu_23 {
  display: none !important;
}
#mceu_104 {
  display: none !important;
} */
.page-div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ddd;
  color: #333;
  margin: 0 5px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
.page-div .c-blue{
  background: steelblue;
  color: #fff;
}
.page-div .active{
  background: orange;
  color: #fff;
}

.page-div .c-default{
    background: gray;
  color: #fff;
}

.editor_fl{
  float: left !important;
}
</style>
